<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
      :mapJson="mapJson"
      :isResize="true"
      @mouseover="stopIntervalShow"
      @mouseout="startIntervalShow"
    ></Echart>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
import guianArea from "@/utils/map/guianArea.json";
import china from "@/utils/map/china.json";
// console.log(china.features.find(item => item.properties.name === '贵州省'), 'china----------');

// 文字背景
var img2 =
  "image://";
// 地图坐标图片
const localImg =
  "image://";
// var mapDate = [
//   {
//     name: "阜平县",
//     value: [106.593296, 26.414809],
//     datas: 13,
//     datas1: 16,
//   },
//   {
//     name: "政府服务大厅",
//     value: [106.495981, 26.43642],
//     datas: 14,
//     datas1: 17,
//   },
//   {
//     name: "贵州省安顺市平坝区凯坝立交",
//     value: [106.489118, 26.302646],
//     datas: 24,
//     datas1: 28,
//   },
//   {
//     name: "麦坪乡",
//     value: [106.544177, 26.482454],
//     datas: 24,
//     datas1: 19,
//   },
// ];

const toPercent = (val, fix = 0) => {
  return val || val === 0 ? Number(val).toFixed(fix) : "-";
};
const ToNumber = (val, fix = 2) =>
  val || val === 0 ? Number(Number(val).toFixed(fix)) : "-";

export default {
  data() {
    return {
      options: {},
      mapJson: guianArea,
      index: 0,
      dataLength: 0,
      timer: null,
      hoverTimer: null,
      isHovering: false
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    dateType: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.init(this.data);
    // this.dataLength = this.data.length || 0
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
        this.index = 0;
        clearInterval(this.timer);
        this.timer = null;
        this.$nextTick(() => {
          this.intervalShow(val);
        });
      },
      deep: true,
    },
    dateType: {
      handler() {
        this.init(this.data);
      },
      deep: true,
    },
    dataLength: {
      handler(val) {},
      deep: true,
    },
    // index: {
    //   handler() {
    //     this.init(this.data);
    //   },
    //   deep: true,
    // },
  },
  methods: {
    // 停止轮播
    stopIntervalShow() {
      console.log("stopIntervalShow---");
      this.isHovering = true;
      clearTimeout(this.hoverTimer);
      clearInterval(this.timer);
      this.timer = null;
    },
    startIntervalShow() {
      console.log("startIntervalShow---");
      this.hoverTimer = setTimeout(() => {
        this.isHovering = false;
        this.intervalShow()
      }, 300)
    },
    intervalShow() {
      if (this.isHovering) return;
      const val = this.data;
      if (val.length) {
        this.timer = setInterval(() => {
          this.index++;
          if (this.index === val.length) {
            this.index = 0;
          }
          this.init(val);
        }, 5000);
      } else {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    init(newData) {
      console.log(this.isHovering,'this.isHovering-----------');
      const mapDate = newData.map((item) => {
        return {
          ...item,
          name: item.name,
          value: [item.longitude, item.latitude],
        };
      });
      const that = this;
      this.options = {
        // title: {
        //     top: 20,
        //     text: '贵安新区',
        //     subtext: '',
        //     x: 'center',
        //     textStyle: {
        //         color: '#fff',
        //         fontWeight: 100,
        //         fontSize: 14,
        //     },
        // },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            const item = params.data;
            if (!item.name) {
              return;
            }
            // console.log(item,'data');
            let text = `<div style="font-weight:bold;">${item.deviceType}: <span style="color:#1890ff;">${item.capacity}</span></div>`;
            const dateType = that.dateType;
            const isAll = dateType.length === 0;
            if (dateType.includes("中长期电价") || isAll) {
              text += `<div style="font-weight:bold;">中长期电价: <span style="color:#1890ff;">${ToNumber(
                item.midLongTermPrice,
                2
              )}</span></div>`;
            }
            if (dateType.includes("日前电价") || isAll) {
              text += `<div style="font-weight:bold;">日前电价: <span style="color:#1890ff;">${ToNumber(
                item.dayAheadAvgPrice,
                2
              )}</span></div>`;
            }
            if (dateType.includes("实时电价") || isAll) {
              text += `<div style="font-weight:bold;">实时电价: <span style="color:#1890ff;">${ToNumber(
                item.realTimeClearedPrice,
                2
              )}</span></div>`;
            }
            if (dateType.includes("抄表卡电价") || isAll) {
              text += `<div style="font-weight:bold;">抄表卡电价: <span style="color:#1890ff;">${ToNumber(
                item.meterReadingAvgPrice,
                2
              )}</span></div>`;
            }
            if (dateType.includes("结算单电价") || isAll) {
              text += `<div style="font-weight:bold;">结算单电价: <span style="color:#1890ff;">${ToNumber(
                item.settlementAvgPrice,
                2
              )}</span></div>`;
            }
            return `
              <div style="width:150px;font-weight:bold;margin-bottom:5px;">${item.name}</div>
               ${text}
            `;
          },
        },
        geo: {
          show: false,
          map: "bd",
          aspectScale: 0.75,
          layoutCenter: ["50%", "50.5%"],
          layoutSize: "100%",
          silent: true,
          roam: false,
          z: 0,
          itemStyle: {
            normal: {
              areaColor: "#9ec8fa",
              shadowColor: "#d6e3f7",
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 5,
              borderColor: "rgba(0, 0, 0, 0.7)",
              borderWidth: 0.5,
            },
            // emphasis: {
            //   areaColor: "#2AB8FF",
            //   borderWidth: 1,
            //   color: "green",
            //   label: {
            //     show: false,
            //   },
            // },
          },
        },
        series: [
          {
            type: "map",
            roam: true,
            top: 45,
            // projection: {
            //   project: (point) => [
            //     (point[0] / 180) * Math.PI,
            //     -Math.log(
            //       Math.tan((Math.PI / 2 + (point[1] / 180) * Math.PI) / 2)
            //     ),
            //   ],
            //   unproject: (point) => [
            //     (point[0] * 180) / Math.PI,
            //     ((2 * 180) / Math.PI) * Math.atan(Math.exp(point[1])) - 90,
            //   ],
            // },
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#2ab8ff",
                borderWidth: 0,
                areaColor: "#2670d4",
                shadowColor: "#6cadfa",
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 15,
              },
              emphasis: {
                // borderColor: "#2ab8ff",
                // borderWidth: 1,
                areaColor: "#2670d4",
                // shadowColor: "rgba(38, 112, 212, 0.5)",
                // shadowBlur: 0,
                // shadowOffsetX: 0,
                // shadowOffsetY: 1,
              },
            },
            select: {
              disabled: true,
            },
            zoom: 1.15,
            roam: false,
            map: "bd",
          },
          {
            tooltip: {
              show: false,
            },
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              scale: 10,
              brushType: "stroke",
            },
            showEffectOn: "render",
            itemStyle: {
              normal: {
                shadowColor: "#0ff",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                color: function (params) {
                  var colorList = [
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#64fbc5",
                      },
                      {
                        offset: 1,
                        color: "#018ace",
                      },
                    ]),
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#64fbc5",
                      },
                      {
                        offset: 1,
                        color: "#018ace",
                      },
                    ]),
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#168e6d",
                      },
                      {
                        offset: 1,
                        color: "#c78d7b",
                      },
                    ]),
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#61c0f1",
                      },
                      {
                        offset: 1,
                        color: "#6f2eb6",
                      },
                    ]),
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#168e6d",
                      },
                      {
                        offset: 1,
                        color: "#c78d7b",
                      },
                    ]),
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#61c0f1",
                      },
                      {
                        offset: 1,
                        color: "#6f2eb6",
                      },
                    ]),
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              normal: {
                color: "#fff",
              },
            },
            symbol: "circle",
            symbolSize: [10, 5],
            data: mapDate,
            zlevel: 1,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            itemStyle: {
              color: "#f00",
            },
            symbol: localImg,
            // symbol: function (value, params) {
            //     return params.data.img;
            // },
            symbolSize: [32, 41],
            symbolOffset: [0, -20],
            z: 9999,
            data: mapDate,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  // const name = params.name;
                  const item = params.data;
                  // const one = `{one|}  ${toPercent(item.mediumVoltageFailureRate, 2)}%\n`;
                  // const two = `{two|}  ${toPercent(item.averageOutageTime, 2)}h\n`;
                  // const three = `{three|}  ${toPercent(item.failureNumber, 0)}次\n`;
                  // let text = ``;
                  // if (true) {
                  //   text += one
                  //   text += two
                  //   text += three
                  // }
                  // return text;
                  const dateType = that.dateType;
                  let text = `---${item.name}---\n${item.deviceType}: ${item.capacity}\n`;
                  const isAll = dateType.length === 0;
                  if (dateType.includes("中长期电价") || isAll) {
                    text += `中长期电价: ${ToNumber(
                      item.midLongTermPrice,
                      2
                    )}\n`;
                  }
                  if (dateType.includes("日前电价") || isAll) {
                    text += `日前电价: ${ToNumber(item.dayAheadAvgPrice, 2)}\n`;
                  }
                  if (dateType.includes("实时电价") || isAll) {
                    text += `实时电价: ${ToNumber(
                      item.realTimeClearedPrice,
                      2
                    )}\n`;
                  }
                  if (dateType.includes("抄表卡电价") || isAll) {
                    text += `抄表卡电价: ${ToNumber(
                      item.meterReadingAvgPrice,
                      2
                    )}\n`;
                  }
                  if (dateType.includes("结算单电价") || isAll) {
                    text += `结算单电价: ${ToNumber(
                      item.settlementAvgPrice,
                      2
                    )}\n`;
                  }
                  return text;
                },
                fontWeight: 800,
                fontSize: 12,
                // height: 30,
                // offset: [0,-25],
                color: "#FFFFFF",
                lineHeight: 20,
                // rich: {
                //   one: {
                //     backgroundColor: "#8F00FD",
                //     borderColor: '#E2FFFF',
                //     borderWidth: 1,
                //     width: 14,
                //     height: 14,
                //     borderRadius: 50,
                //   },
                //   two: {
                //     backgroundColor: "#FB9E00",
                //     borderColor: '#E2FFFF',
                //     borderWidth: 1,
                //     width: 14,
                //     height: 14,
                //     borderRadius: 50,
                //   },
                //   three: {
                //     backgroundColor: "#1EC969",
                //     borderColor: '#E2FFFF',
                //     borderWidth: 1,
                //     width: 14,
                //     height: 14,
                //     borderRadius: 50,
                //   },
                // },
              },
              emphasis: {
                show: true,
              },
            },
            // itemStyle: {
            //   color: "#00FFF6",
            // },
            symbol: img2,
            symbolSize: [
              150,
              that.dateType.length === 0 ? 180 : 80 + 20 * that.dateType.length,
            ],
            symbolOffset: [0, -105],
            z: 999,
            data: [mapDate[this.index]],
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  var name = params.name;
                  var text = `${name}`;
                  return text;
                },
                fontWeight: 800,
                fontFamily: "PingFangSC, PingFang SC",
                fontSize: 18,
                height: 14,
                color: "#FFFFFF",
                align: "center",
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              color: "transparent",
            },
            symbol: "arrow",
            // symbolSize: [67, 77],
            symbolOffset: [0, 20],
            z: 999,
            data: mapDate,
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
